<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>视频求职</h2>
        </template>
      </PageTitle>
      <el-row
        :gutter="10"
        type="flex"
        justify="space-between"
        style="margin-top: 20px"
      >
        <el-col :span="12">
          <el-row :gutter="10" type="flex">
            <el-col :span="6">
              <el-select placeholder="不限审核状态">
                <el-option
                  v-for="item in examineStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select placeholder="不限显示状态">
                <el-option
                  v-for="item in showStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row type="flex">
            <el-select placeholder="标题">
              <el-option
                v-for="item in titleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-row type="flex">
              <el-input placeholder="请输入搜索内容"></el-input>
              <el-button type="primary">
                <i class="el-icon-search"></i>
              </el-button>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        ooltip-effect="dark"
        :data="videoSeekList"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column label="姓名" align="center" width="width" fixed />
        <el-table-column
          label="标题"
          align="center"
          prop="title"
          fixed
          width="230"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.title"
              placement="top"
            >
              <div class="el-tooltip">{{ scope.row.title }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="视频预览"
          align="center"
          prop="phone"
          width="100"
        />
        <el-table-column
          label="浏览量"
          align="center"
          prop="view_count"
          width="180"
        />
        <el-table-column label="文件大小" align="center" prop="qualification">
        </el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          prop="practice_sum"
          width="120"
        />
        <el-table-column
          label="公开状态"
          align="center"
          prop="com_name"
          width="120"
        />
        <el-table-column
          label="发布日期"
          align="center"
          prop="updatetime"
          width="220"
        />
        <el-table-column width="150" align="center" fixed="right" label="操作">
          <template>
            <el-button type="warning" size="small">审核</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="8">
          <el-button type="warning" size="small">审核</el-button>
          <el-button type="danger" size="small">删除所选</el-button>
        </el-col>
        <el-col :span="16">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: right"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  selCompanyVideoListApi,
  updateCompanyVideoByIdApi,
  delCompanyVideoByIdApi,
} from "@/api/application";
export default {
  data() {
    return {
      videoSeekListQuery: {
        audit: 0,
        isPublic: 0,
        page: 1,
        pagesize: 10,
        keyType: 1,
        keyword: "",
      },
      total: "",
      list: [
        {
          id: 11,
          is_public: 2,
          audit: 3,
          uid: 1,
          title:
            "宁波余姚嵌入式软件工程师招聘#电子产品#软件开发#好工作 #高薪职业 #找工作  #电子工程师",
          filesize: 2275693,
          fid: 5,
          view_count: 0,
          lon: 121.63084278,
          lat: 29.86606812,
          address: "浙江省宁波市",
          like: 0,
          real_id: 100012,
          reason: "",
          addtime: "2024-02-17 08:21:48",
          updatetime: "2024-02-17 08:21:48",
          display_name: null,
          sex: null,
          fullname: null,
          enter_job_time: null,
          birthday: null,
          education: null,
          specialty: null,
          logo: null,
          is_display: null,
          resume_audit: null,
          resume_id: null,
          video_src:
            "https:\/\/qncdn.blwang.com\/2e9da19b50bc5530029770dc14f597e8.mp4",
        },
        {
          id: 2,
          is_public: 2,
          audit: 1,
          uid: 1,
          title:
            "听田园乡野的声息，远村有近邻，\r\n与伙伴一同寻趣乡野，听说，住在大自然，假期会变得很慢……#古村落风景 #大山深处自然美山清水秀好风光 #在村落里感受春日的微风 #老房子的回忆",
          filesize: 4009138,
          fid: 4,
          view_count: 0,
          lon: 121.63084278,
          lat: 29.86606812,
          address: "浙江省宁波市",
          like: 0,
          real_id: 2,
          reason: "",
          addtime: "2024-02-17 08:00:56",
          updatetime: "2024-02-17 08:00:56",
          display_name: null,
          sex: null,
          fullname: null,
          enter_job_time: null,
          birthday: null,
          education: null,
          specialty: null,
          logo: null,
          is_display: null,
          resume_audit: null,
          resume_id: null,
          video_src:
            "https:\/\/qncdn.blwang.com\/6800eef145bfb6ce92a2acb1385946d2.mp4",
        },
        {
          id: 1,
          is_public: 2,
          audit: 1,
          uid: 1,
          title: "测试油菜花",
          filesize: 4502053,
          fid: 3,
          view_count: 0,
          lon: 121.63084278,
          lat: 29.86606812,
          address: "浙江省宁波市",
          like: 0,
          real_id: 1,
          reason: "",
          addtime: "2024-02-17 07:54:00",
          updatetime: "2024-02-17 07:54:00",
          display_name: null,
          sex: null,
          fullname: null,
          enter_job_time: null,
          birthday: null,
          education: null,
          specialty: null,
          logo: null,
          is_display: null,
          resume_audit: null,
          resume_id: null,
          video_src:
            "https:\/\/qncdn.blwang.com\/16291bc7e9f1c79d92d4b2c438db48a7.mp4",
        },
      ],
      examineStatus: [
        { id: 1, name: "不限审核状态" },
        { id: 2, name: "未审核" },
        { id: 3, name: "已审核" },
        { id: 4, name: "未通过" },
      ],
      showStatus: [
        { id: 1, name: "不限显示状态" },
        { id: 2, name: "显示" },
        { id: 3, name: "隐藏" },
      ],
      titleOptions: [
        { id: 1, name: "标题" },
        { id: 2, name: "UID" },
      ],
    };
  },
  created() {
    this.selCompanyVideoList();
  },
  methods: {
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.videoSeekListQuery.pagesize = pageSize;
      this.selCompanyVideoList();
    },
    handleCurrentChange(page) {
      console.log(page);
      this.videoSeekListQuery.page = page;
      this.selCompanyVideoList();
    },
    async selCompanyVideoList() {
      const res = await selCompanyVideoListApi(this.videoSeekListQuery);
      this.videoSeekList = res.records;
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tooltip {
  white-space: nowrap;
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
